<template>
  <a-modal
    v-model:visible="visible"
    title="修改里程"
    width="90vw"
    title-align="start"
    :render-to-body="false"
    ok-text="确定"
    :ok-loading="loading"
    hide-cancel
    @cancel="handleCancel"
    @close="handleClose"
  >
    <FormPro
      ref="formRef"
      v-model="formModel"
      :form-filed-list="formArr"
      layout="vertical"
      :root-row="{
        gutter: 20,
      }"
    ></FormPro>

    <template #footer>
      <a-button type="primary" :loading="loading" @click="handleOk">
        提交
      </a-button>
      <a-button :loading="loading" @click="handleCancel">取消</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { FormFiled } from '@/components/FormPro/props';
  import { apiChangeMil } from '@/api/dispatch';
  import { getFormFileds } from './data';

  interface Props {
    id: string;
    billType: string;
    close: () => void;
    resolve: () => void;
  }
  const props = withDefaults(defineProps<Props>(), {
    close: () => {
      return () => {};
    },
    resolve: () => {
      return () => {};
    },
  });

  let type = '';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(true);

  const formArr = ref<FormFiled[]>(getFormFileds('edit'));

  const formModel = ref<any>({
    billType: props.billType,
  });
  const formRef = ref<any>();

  const handleOk = async () => {
    const result = await formRef.value.aform.validate();
    if (result) return;
    loading.value = true;
    apiChangeMil({
      id: props.id,
      sheet_mileage: formModel.value.sheet_mileage,
    })
      .then(() => {
        Message.success('审批成功！');
        handleSuccess();
      })
      .finally(() => {
        loading.value = false;
      });

    handleSuccess();
  };

  const handleSuccess = () => {
    type = 'reslove';
    visible.value = false;
  };

  const handleCancel = () => {
    type = 'reject';
    visible.value = false;
  };

  const handleClose = () => {
    loading.value = false;
    if (type === 'reject') {
      props.close();
    } else {
      props.resolve();
    }
  };
</script>

<style lang="less"></style>
